/**
 * 获取当前时间
 */
window.onload=function(){

    setInterval(function () {
        //第一：创建对象
        var d = new Date();

        //第二：调用对象的属性和方法
        //1.获取相关时间信息
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        var milliseconds = d.getMilliseconds();

        //2.拼接字符串
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        //3.显示在h1节点中
        var nowTime = document.getElementById("showTime");
        nowTime.innerText = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; //+ " . " + milliseconds;
    }, 1);

}

let app=new Vue({
    el:'#app',
    data:{
        admin:JSON.parse(sessionStorage.getItem('admin')),
        userNum:null,               //用户总数
        examPaperNum:null,          //试卷总数
        paperQuestionNum:null,      //试题总数
        examPaperResultNum:null,    //答卷总数
        errorQuestionNum:null,      //答题总数
        taskNum:null,               //任务总数
        xAxis:[],                   //当前月日期
        yAxis:[],                   //用户活跃度
        yAxis2:[]                   //题目月数量
    },
    created(){
        // 获取当前月的天数
        let days = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate();
        for(let i=1;i<=days;i++){
            this.xAxis.push(i);
        } 

        // 存放当前月的所有日期,用于统计用户活跃度
        let dateArrs=[];
        // 存放当前月的所有日期,用于统计题目月数量
        let dateArrs2=[];
        // 获取当前年
        let year=new Date().getFullYear();
        // 获取当前月
        let month=(new Date().getMonth()+1)<10 ? '0'+(new Date().getMonth()+1) : new Date().getMonth()+1
        // 获取当前日
        let nowDay=(new Date().getDate());
        
        // 用于统计用户活跃度的当前月日期
        for(let i=1;i<=days;i++){
            // 截止当前日
            if(i>nowDay){
                break;
            }
            let date=i<10 ? '0'+i : i;
            let result=year+"-"+month+"-"+date;
            dateArrs.push(result);
        }
        // 用于统计当前月的题目月数量
        for(let i=1;i<=days;i++){
            // 截止当前日
            if(i>nowDay){
                break;
            }
            let date=i<10 ? '0'+(i+1) : i+1;
            let result=year+"-"+month+"-"+date;
            dateArrs2.push(result);
        }
        // 统计用户当前月每天的日志动态数,从而统计本月活跃度
        $.ajax({
            url: 'http://localhost:8080/log/selectActiceDegree',
            type: 'post',
            data: {'dateArr':dateArrs},
            dataType: 'json',
            traditional: true, //解决ajax异步请求传数组参数，后台接收为null的问题
            success: function (vo) {
                if (vo.code == 200) {
                    app.yAxis=vo.data;
                    app.myChart();
                }
            }
        });

        // 统计当前月题目月数量
        $.ajax({
            url: 'http://localhost:8080/paperQuestion/selectActiceDegree',
            type: 'post',
            data: {'dateArr':dateArrs2},
            dataType: 'json',
            traditional: true, //解决ajax异步请求传数组参数，后台接收为null的问题
            success: function (vo) {
                if (vo.code == 200) {
                    app.yAxis2=vo.data;
                    app.myChart2();
                }
            }
        });
     


        // 查询用户总数
        $.ajax({
            url:'http://localhost:8080/user/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.userNum=vo.data.length;
                }
            }
        });
        // 查询试卷总数
        $.ajax({
            url:'http://localhost:8080/examPaper/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.examPaperNum=vo.data.length;
                }
            }
        });
        // 查询试题总数
        $.ajax({
            url:'http://localhost:8080/paperQuestion/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.paperQuestionNum=vo.data.length;
                }
            }
        });
        // 查询答卷总数
        $.ajax({
            url:'http://localhost:8080/examPaperResult/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.examPaperResultNum=vo.data.length;
                }
            }
        });
        // 查询答题总数
        $.ajax({
            url:'http://localhost:8080/errorQuestion/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.errorQuestionNum=vo.data.length;
                }
            }
        });
        // 查询任务总数
        $.ajax({
            url:'http://localhost:8080/task/select',
            type:'get',
            success:function(vo){
                if(vo.code==200){
                    app.taskNum=vo.data.length;
                }
            }
        });
    },
    methods:{
        // 统计当前月用户活跃度echarts折线图
        myChart(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('main'));
            // 获取当前月
            let nowMonth=(new Date().getMonth()+1);
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: nowMonth+'月用户活跃度',
                    left:'center',          //标题居中
                    textStyle:{
                        color:'#009FCC',    //标题字体颜色
                        fontWeight:'normal' //标题字体样式
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function(params){     // 鼠标悬浮提示框自定义样式
                        return params[0].name + '日' + '<br/>'
                            + params[0].marker + params[0].seriesName + ':' + params[0].data + '度'
                      
                    }
                },
                grid: {             //边距
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#009FCC'      // 坐标线字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type:  'solid' ,
                            color:  '#009FCC'    //坐标线颜色
                        }
                    },
                    data:app.xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#009FCC'  // 坐标线字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type:  'solid' ,
                            color:  '#009FCC'     //坐标线颜色
                        }
                    },
                },
                lineStyle:{
                    color:'#34bfa3'   // 折线条颜色
                },
                series: [
                    {
                        name:'用户活跃度',
                        smooth: true,   //变为曲线 默认false折线
                        type:'line',
                        stack: '总量',
                        data:app.yAxis,
                        areaStyle: {        // 设置曲线区域颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                [{
                                    offset: 0,   //上层颜色透明度
                                    color: '#00FFFF'//下层渐变
                                }, 
                                {
                                    offset: 0.8,    //下层颜色透明度
                                    color: 'rgba(137, 189, 27, 0.3)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        }
                    }
                    
                ]
                
            });
        
        },
        // 统计当前月题目月数量echarts折线图
        myChart2(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('main2'));
            // 获取当前月
            let nowMonth=(new Date().getMonth()+1);
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: nowMonth+'月题目月数量',
                    left:'center',          //标题居中
                    textStyle:{
                        color:'#009FCC',    //标题字体颜色
                        fontWeight:'normal' //标题字体样式
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function(params){     // 鼠标悬浮提示框自定义样式
                        return params[0].name + '日' + '<br/>'
                            + params[0].marker + params[0].seriesName + ':' + params[0].data + '条'
                      
                    }
                },
                grid: {  //边距
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#009FCC'      // 坐标线字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type:  'solid' ,
                            color:  '#009FCC'    //坐标线颜色
                        }
                    },
                    data:app.xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#009FCC'  // 坐标线字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type:  'solid' ,
                            color:  '#009FCC'     //坐标线颜色
                        }
                    },
                },
                lineStyle:{
                    color:'#34bfa3'   // 折线条颜色
                },
                series: [
                    {
                        name:'题目数量',
                        smooth: true,   //变为曲线 默认false折线
                        type:'line',
                        stack: '总量',
                        data:app.yAxis2,
                        areaStyle: {        // 设置曲线区域颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00FFFF'//下层渐变
                                }, 
                                {
                                    offset: 0.8,
                                    color: 'rgba(137, 189, 27, 0.3)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        }
                    }
                ]
            });
        
        }
        
    }
});